<template>
    <div class="supplierInPage">
        <div class="banner">
            <div class="box80">
                <div class="font120">WELCOME！</div>
                <p class="font24">目前照明行业已经进入高速发展期，技术的不断革新，产品的迭代速度加快，造成业主、设计师、工程商在产品选择上的困惑，已无法判断产品参数与效果、价格、质量的关系。在此背景下，我们需要一套运用专业的评测能力、充分展示产品优势、打通信息流通渠道、促进行业价值提升的应用体系。通过从原始数据积累到对项目的决策辅助，逐渐构建完整的应用体系。</p>
            </div>
        </div>
        <div class="cont pad4">
            <div class="font70">在线信息采集</div>
            <div class="wid100 pad3">
                <div class="lt">
                    <img src="@/assets/images/b2_03.png" alt="">
                </div>
                <div class="rt">
                    <el-form ref="form" :model="formSupplier" label-width="80px">
                        <div class="wid100">
                            <el-form-item label="联系人" class="fm1">
                                <el-input v-model="formSupplier.contactor" placeholder="请输入您的名字"></el-input>
                            </el-form-item>
                            <el-form-item label="电话" class="fm1">
                                <el-input v-model="formSupplier.telephone" placeholder="请输入电话号码"></el-input>
                            </el-form-item>
                        </div>
                        <el-form-item label="公    司">
                            <el-input v-model="formSupplier.companyName" placeholder="请输入公司名称"></el-input>
                        </el-form-item>
                        <el-form-item label="主营业务">
                            <el-input v-model="formSupplier.businessType" placeholder="请输入公司主营业务（例：设计，工程，研发，元器件等）"></el-input>
                        </el-form-item>
                        <el-form-item label="擅长产品">
                            <el-input v-model="formSupplier.productType" placeholder="请输入公司擅长产品"></el-input>
                        </el-form-item>
                         <el-form-item>
                            <el-button type="primary" @click="create">提交</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        
    </div>
</template>
<script>
export default {
    data(){
        return{
            formSupplier:{
            }
        }
    },
    methods:{
        create(){
            let self = this
            this.$http.postObj('/api/supplierApplys/create',this.formSupplier,function(res){
                if(res.success){
                    self.$message({
                        message: "提交成功！",
                        type: "success"
                    });
                }else{
              self.$message.error(res.data)
            }
            })
        }
    }
}
</script>

<style  rel="stylesheet/scss" lang="scss" >
.supplierInPage{
     .banner{
         margin-top: 88px;
         padding: 6rem 0;
         background: url('../../assets/images/b1_01.jpg') no-repeat center;
         background-size: cover;
         .font120{
            color: #fff;
            font-size: 120px;
            margin-bottom: 20px;
            line-height: initial;
         }
         .font24{
             color: #fff;
             line-height: 2em;
             width: 80%;
             padding-left: 10%;
         }
    }
    .cont{
        .font70{
            line-height: initial;
            padding: 0 10%;
        }
        .pad3{
            padding-top: 2rem
        }
        .lt{
            width: 40%;
            float: left;
        }
        .rt{
            width: 60%;
            float: left;
            padding-right: 10%;
            padding-left: 5%;
            .fm1{
                width: 50%;
                float: left;
            }
            .el-form-item__label{
                font-size: 16px;
            }
            .el-input{
                .el-input__inner{
                    background-color: rgba(0,0,0,0);
                    border: solid 1px #999999;
                }
            }
            .el-button--primary{
                background-color: #5962a3;
                border:none;
                color: #fff;
                width: 100px;
                text-align: center
            }
        }
    }
    .fot{
        background: #fff;
        .top .container{
            width: 70%;
            margin: auto;
        }
        ul{
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            padding: 3rem 0;
            li{
                position: relative;
                a{
                    color: #888888;
                    &:first-child{
                        color: #666666;
                        font-size: 16px;
                        margin-bottom: 20px;
                    }
                }
                &:first-child{
                    .cont{
                        padding-left: 58px;
                        color: #888888;
                        .font12:first-child{
                            background-image: linear-gradient(0deg, 
                                #208cc6 0%, 
                                #1e74b3 100%);
                            border-radius: 4px;
                            color: #fff;
                            display: inline-block;
                            padding: 2px 10px;
                            margin-bottom: 4px;
                        }
                    }
                    img{
                        position: absolute;
                        left: 0;
                        top: 2px;
                    }
                    p.font12{
                        color: #888888;
                        margin-top: 10px;
                    }
                }
            }
        }
    }
    .bom{
        padding: 14px;
        border: 1px solid #e8f1f7;
        .font14{
            color: #666666;
            text-align: center;
        }
    }
}
</style>
